<template>
  <div class="module7">
    <div class="module7-head">
      <div class="module7-head-left">农事任务</div>
      <div class="module7-head-right">
        <div class="tab">
          <div
            v-for="item in taboptions"
            :class="[
              'tab-item',
              currentTab === item.value ? 'active-tab-item' : ''
            ]"
            :key="item.value"
            @click="() => tabClick(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="module7-content">
      <div class="tab-box">
        <el-table
          :data="tableData"
          height="550px"
          style="width: 100%"
          :border="false"
          :highlight-current-row="false"
          stripe
        >
          <!-- <el-table
          :data="tableData"
          height="100%"
          style="width: 100%"
          :border="false"
          :highlight-current-row="false"
          stripe
        > -->
          <el-table-column
            v-for="item in column"
            :key="item.key"
            :label="item.label"
            :prop="item.key"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { flowList } from '@/api/index'
const colOptions = {
  1: [
    {
      label: '日期',
      key: 'shiFeiDate'
    },
    {
      label: '肥料名称',
      key: 'name'
    },
    {
      label: '施肥方法',
      key: 'type'
    },
    {
      label: '施肥时间',
      key: 'shiFeiTime'
    },
    {
      label: '用量（亩）',
      key: 'area'
    },
    {
      label: '记录或执行人',
      key: 'userName'
    },
    {
      label: '备注',
      key: 'remark'
    }
  ],
  2: [
    {
      label: '除草时间',
      key: 'chuCaoDate'
    },
    {
      label: '除草方法',
      key: 'type'
    },
    {
      label: '记录或执行人',
      key: 'userName'
    },
    {
      label: '备注',
      key: 'remark'
    }
  ],
  3: [
    {
      label: '日期',
      key: 'yongYaoDate'
    },
    {
      label: '农药名称',
      key: 'name'
    },
    {
      label: '农药方法',
      key: 'type'
    },
    {
      label: '用药时间',
      key: 'yongYaoTime'
    },
    {
      label: '防治对象',
      key: 'yongYaoObject'
    },
    {
      label: '记录或执行人',
      key: 'userName'
    },
    {
      label: '间隔期',
      key: 'interval'
    }
  ],
  4: [
    {
      label: '收获时间',
      key: 'shouHuoDate'
    },
    {
      label: '收获方式',
      key: 'type'
    },
    {
      label: '收获量',
      key: 'shouHuoNumber'
    },
    {
      label: '记录或执行人',
      key: 'userName'
    },
    {
      label: '备注',
      key: 'remark'
    }
  ]
}
const taboptions = [
  {
    label: '施肥记录',
    value: 1
  },
  {
    label: '除草记录',
    value: 2
  },
  {
    label: '用药记录',
    value: 3
  },
  {
    label: '收获记录',
    value: 4
  }
]

const currentTab = ref(1)
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  },
  {
    date: '2016-05-01'
  }
])

const column = ref(colOptions[1])

const tabClick = (value) => {
  console.log('value', value)
  currentTab.value = value
  column.value = colOptions[value]
  getList()
}

const getList = () => {
  flowList({ projectId: 1, flowType: currentTab.value, landId: 2 }).then(
    (res) => {
      console.log('res', res)
      if (res.code === 200) {
        const data = res.data.slice(0)
        const _data = data.map((item) => JSON.parse(item.flowData))
        console.log('data', _data)
        tableData.value = _data
      }
    }
  )
}
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.module7 {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .module7-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .module7-head-left {
      width: 405px;
      height: 33px;
      background: url('@/assets/img/card-head.png') no-repeat center;
      background-size: 100% 100%;
      font-family: FZZYJW;
      font-weight: normal;
      font-size: 20px;
      padding-left: 42px;
      color: #c3ff55;
      line-height: 24px;
    }
    .tab {
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      .tab-item {
        width: 100px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 17.01px;
        color: rgba(255, 255, 255, 1);
        background: url('@/assets/img/51.png') no-repeat center;
        background-size: 100% 100%;
        cursor: pointer;
        &.active-tab-item {
          color: yellow;
          background: url('@/assets/img/52.png') no-repeat center;
        }
      }
    }
  }
  .module7-content {
    height: 0;
    flex: 1;
    width: 100%;
    margin-top: 17px;
    overflow: hidden;
    overflow-y: auto;
    .tab-box {
      height: 100%;
      :deep(.el-table__header) {
        border-collapse: inherit;
        border-spacing: 0px;
      }

      :deep(.el-table) {
        background: rgba(1, 1, 1, 0);
      }
      :deep(th) {
        background: rgba(0, 98, 168, 1);
        color: #fff;
        border: none;
      }
      :deep(.el-table__body tr:hover > td) {
        background: rgba(1, 1, 1, 0);
      }
      :deep(.el-table__row) {
        background: rgba(1, 1, 1, 0);
        color: #fff;
        td {
          border: none;
        }
      }
      :deep(.el-table__inner-wrapper:before) {
        height: 0px;
      }
      :deep(.el-table__row--striped) {
        td {
          background: rgba(1, 72, 122, 0.3) !important;
        }
      }
    }
  }
}
</style>
